<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jhq02</title>
    <link rel="stylesheet" href="jhq02.css">
    <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="heart">
        <div class="headon">
            <div class="welcomeback">
                <div class="lg"></div>
                <p>欢迎回来</p>
            </div>
            <div class="portrait"></div>
        </div>
        <div class="column">
            <p>今日</p>
            <p>讯息</p>
            <p>服务</p>
            <p>校园</p>
            <p>我的</p>
        </div>
        <div class="boxtitle">
            <p>邮箱动态-收件箱</p>
            <div class="icons">
                <span class="iconfont">&#xe603;</span>
                <span class="iconfont">&#xe61b;</span>
            </div>
        </div>
        <div class="box">
            <div class="labels">
                <div>
                    <div id="read" class="label">
                        <div class="circle"></div>
                        <p>已读</p>
                    </div>
                    <div class="triangle read"></div>
                </div>
                <div>
                    <div id="unread" class="label">
                        <div class="circle"></div>
                        <p>未读</p>
                    </div>
                    <div class="triangle unread"></div>
                </div>
            </div>
            <div class="messages">
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog1.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog1.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog2.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog3.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog4.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog3.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog2.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog1.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog3.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog3.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog3.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog1.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog2.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog4.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog4.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="read message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog2.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
                <div class="unread message">
                    <img src="https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/dog1.png" alt="dog1">
                    <p>邮件缩略信息。。。</p>
                    <p class="date">2024.2.20</p>
                    <div>
                        <p>删除</p>
                        <p>回复</p>
                    </div>
                </div>
            </div>
            <p class="towrite">去写信</p>
        </div>
        <div class="foot"></div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var readif = document.getElementById('read');
            var unreadif = document.getElementById('unread');
            var read = Array.from(document.getElementsByClassName('read'));
            var unread = Array.from(document.getElementsByClassName('unread'));
                readif.addEventListener('click', function () {
                read.forEach(function (item) {
                    item.style.display = 'flex';
                });
                unread.forEach(function (item) {
                    item.style.display = 'none';
                });
            });
            unreadif.addEventListener('click', function () {
                read.forEach(function (item) {
                    item.style.display = 'none';
                });
                unread.forEach(function (item) {
                    item.style.display = 'flex';
                });
            });
        });
    </script>
</body>
</html>
